@import '../../app.scss';

page {
  padding: 0 20rpx;
}

.items-box {
  box-shadow: 1px 1px 2px 0px rgba(24, 25, 25, 0.25);
  border-radius: 10rpx;

  .items-top {
    border-radius: 10rpx;
    background: #fff;

    .color-yellow {
      text-align: right;
    }
  }
  .user-photo {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
  }

  .state_icon {
    width: 80rpx;
    height: 59rpx;
    margin-right: 50rpx;
  }

  .label-text {
    border-radius: 3rpx;
    background: map-get($map: $colors, $key: "blue");
  }

  .items-bottom {
    flex-direction: row-reverse;

    .btn {
      margin-left: 20rpx;
      font-size: 24rpx;
      padding: 10rpx 30rpx;
      border-radius: 100rpx;
    }

    .blue-btn {
      color: map-get($map: $colors, $key: "blue");
      border: 2rpx solid map-get($map: $colors, $key: "blue");
    }

    .grey-btn {
      color: #666;
      border: 2rpx solid #666;
    }
  }

  .right-box {
    text-align: right;
  }
}

.score-box {
  @extend .items-box;
  padding-bottom: 0;
  .star-box {
    image {
      width: 31rpx;
      height: 31rpx;
      margin-right: 15rpx;
    }
  }

}

.content {
  @extend .items-box;

}

button {
  background: map-get($map: $colors, $key: "blue");
  font-weight: 400 !important;
  border-radius: 30rpx !important;
  width: 450rpx;
  height: 60rpx;
  line-height: 60rpx !important;
  padding: 0 !important;
  margin: 0;
  color: #fff;
  margin-top: 150rpx;
}

button::after {
  border: none;
  padding: 0;
}